body {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background-color: #dce7fe;
  border-style: solid;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  position: relative;
}

* {
  font: inherit;
  box-sizing: border-box;
}

i {
  font-style: italic;
}
.selcls {
  padding: 9px;
  border: solid 1px #517b97;
  outline: 0;
  background: -webkit-gradient(
    linear,
    left top,
    left 25,
    from(#ffffff),
    color-stop(4%, #cad9e3),
    to(#ffffff)
  );
  background: -moz-linear-gradient(top, #ffffff, #cad9e3 1px, #ffffff 25px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.background__white {
  background-color: white;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.main {
  padding-top: 2rem;
  width: 100%;
  max-width: 960px;
  height: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #fff;
  top: auto;
  right: auto;
  background-position: 0px 0px;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
}

a:hover {
  color: #53586e;
  text-decoration: none;
}

.full_width {
  width: 100%;
  margin: 0 auto;
}

.caps__title {
  color: #807372;
  text-align: center;
  height: 25px;
  font-size: 1.1em;
  font-weight: bolder;
  line-height: 27px;
}

.spacing {
  height: 15px;
  clear: both;
}

.section__subtitle {
  color: #9a8d8c;
  font-size: 1.2em;
  font-weight: bold;
}

.section__text {
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 0.5rem;
}

.upper {
  text-transform: uppercase;
}

.next__page {
  display: flex;
  flex-direction: row;
}
.next__page li {
  margin: 0 10px;
}

.section__banner__caps {
  height: 65px;
  font-size: 1.5em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 70px;
  font-weight: bolder;
  background-color: #8491c4;
  margin-top: 5px;
}

.no-gutters {
  height: 100%;
  margin: 0 0 -15px 0;
}

.expand__over {
  position: absolute;
  z-index: 1;
  right: 2rem;
}

.owl-carousel {
  -ms-touch-action: none;
  touch-action: none;
}

#error__message {
  color: red;
}

.general__search {
  margin-top: 2rem;
  margin-left: 1rem;
  width: 80%;
  max-width: 350px;
  height: 175px;
  border: 2px solid #9b8d8c;
  border-radius: 22px;
  padding: 4px;
  font-size: 1rem;
}

.general__search__title {
  width: 60%;
  border-radius: 16px;
  color: white;
  text-align: center;
  height: 32px;

  text-transform: uppercase;
  font-weight: bolder;
  line-height: 32px;
  background-color: #9b8d8c;
}

.general__search__subtitle {
  width: 90%;
  height: 40px;

  line-height: 20px;
  font-weight: normal;
  margin: 10px 0 10px 20px;
}

.general__search__searchbuttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
}

.general__search__textInput {
  height: 39px;
  line-height: 1.4em;
  border: none;
  display: block;
  margin-left: 20px;
  color: #9b8d8c;
  margin-top: 1px;
  width: 80%;
}

.general__search__searchwindow {
  border-radius: 15px;
  width: 95%;
  height: 45px;
  border: 2px solid #9b8d8c;
  position: relative;
  margin: 0 auto;
  max-width: 600px;
}

.general__search__searchwindow img {
  height: 20px;
}

.general__search__label {
  border-radius: 15px;
  width: 120px;
  height: 30px;

  color: white;
  line-height: 30px;
  background-color: #9b8d8c;
  text-align: center;
  margin: 0 5px 0 12px;
  float: left;
  display: block;
}

.cloud {
  margin: 50px auto 0 auto;
  text-align: center;
}

.alphabet {
  color: #78b74a;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  max-width: 500px;
  flex-wrap: wrap;
}

.alphabet li {
  margin: 5px 10px;
}

.mixedList__table {
  width: 90%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 320px;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

.mixedList__table__entry {
  max-width: 300px;
  width: 50%;
  margin: 0;
  border-top: solid 2px #9a8d8c;
}

.mixedList__table__entry__picto {
  height: 30px;
  width: 50px;
  border-bottom: solid 2px white;
  display: inline-block;
  background-color: #9a8d8c;
}

.mixedList__table__entry__picto img {
  height: 28px;
}

.mixedList__table__entry__link {
  position: absolute;

  height: 30px;

  width: calc(45% - 50px);
  max-width: 250px;
  display: inline-block;
  padding-left: 25px;
  border-right: solid 4px #9a8d8c;
}

.mixedList__table__entry:nth-child(10) .mixedList__table__entry__link {
  border-bottom: solid 2px #9a8d8c;
}

.mixedList__table__entry:last-child .mixedList__table__entry__link {
  border-bottom: solid 2px #9a8d8c;
}

.section {
  width: 80%;
  max-width: 600px;
  margin: 0px 0px 10px 20px;
  border-style: none;
  height: auto;
  font-size: 1rem;
  display: inline-block;
}

.section img {
  margin: 0 1rem 0.5rem 0;
  float: left;
  border: 1px rgb(211, 204, 204) solid;
}

.section__subtitle {
  font-size: 1.2em;
  font-weight: bolder;
  color: #78b74a;
}

.section__greybold {
  font-weight: bolder;
  font-size: 1rem;
  color: rgb(51, 51, 51);
}

.section__submenu {
  min-height: 20px;
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 13px auto 20px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 1.5rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.section__submenu a:hover {
  margin: 0px 3px 0px 3px;
  font-size: 0.92em;

  font-weight: bolder;
}
.section__submenu li {
  margin: 0 15px;
}

.notFound {
  height: 400px;
  font-size: 3rem;
  width: 80%;
  margin: 5rem auto;
  text-align: center;
}

.garconsColor {
  color: #8491c4;
  font-weight: bold;
  font-size: 1.2rem;
}

.fillesColor {
  color: #dd7d90;
  font-weight: bold;
  font-size: 1.2rem;
}

.smallNameList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 40px;
  width: 500px;
}

.smallNameList li {
  height: 20px;
  font-size: 1rem;

  width: 250px;
}

.ninetyPercent {
  width: 90%;
  margin: 10px auto;
  min-height: 300px;
}

.hidden {
  display: none;
}

.no__border {
  border: none;
}

.italic {
  font-style: italic;
}

.error__image {
  margin: 40px 0;
  text-align: center;
}

.error__image img {
  width: 200px;
  height: auto;
}

.error__message {
  font-size: 1.5rem;
  width: 80%;
  margin: 5rem auto;
}

.error__message__small {
  font-size: 1.2rem;
  width: 80%;
  margin: 3rem auto;
}
.error__message__small a {
  font-size: 1.2rem;
  width: 80%;
  margin: 3rem auto;
  font-weight: bolder;
}

.officialWidget {
  width: 95%;
  max-width: 500px;
  margin-top: 10px;
  font-size: 0.9em;
  line-height: 1.3em;
  padding-top: 7px;
  margin-left: 20px;
}

.officialWidget img {
  float: left;
  margin-right: 14px;
  width: 160px;
  height: auto;
}

.officialWidget__title {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 600;
  bottom: 10px;
  padding-bottom: 7px;
  background-position: top;
}

.officialWidget__text {
  font-size: 1rem;
  line-height: 1.3;
}

.official__link {
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 600;
}

.active {
  color: rgb(0 0 0 / 75%);
}

.meaning__block img {
  border: none;
}

@media only screen and (max-width: 768px) {
  .hide__mobile {
    display: none;
  }

  .smallNameList {
    width: 100%;
  }
}

@media only screen and (max-width: 850px) {
  .smallNameList {
    width: 260px;
  }
}

/* mobile phones */
@media only screen and (min-width: 768px) {
  .show__768 {
    display: none;
  }
}

@media only screen and (min-width: 850px) {
  .show__mobile {
    display: none;
  }
}

@media only screen and (max-width: 850px) {
  .hide__mobile {
    display: none;
  }
}

@media only screen and (max-width: 750px) {
  .mixedList__letter__nav {
    width: 90%;
    font-size: 0.9rem;
  }

  .mixedList__table {
    width: 100%;
    max-width: 400px;

    height: 650px;
  }

  .section__banner__caps {
    font-size: 1.4em;
  }

  .mixedList__table__entry {
    width: 100%;
  }

  .mixedList__table__entry__link {
    width: 250px;
    padding-left: 50px;
  }

  /* .officialWidget {
    margin-left: 40px;
    margin-right: 20px;
  }

  .officialWidget img {
    width: 140px;
    height: auto;
  } */

  .caps__title {
    color: black;
    font-size: 1em;
    font-weight: bold;
  }
}

@media only screen and (max-width: 500px) {
  .main {
    padding-top: 0.5rem;
  }

  .section img {
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
  }

  .display img {
    visibility: visible;
    width: 90%;
    height: auto;
    margin: 1rem;
  }
}